<template>
    <!--
        新增或编辑表单
    -->
    <el-dialog 
        :title="title" 
        :visible.sync="visible"
        v-if="visible"
        width="600px"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        append-to-body>
        <el-form  ref="FORM" :model="form" :rules="rule" label-width="120px">

            <el-row>
                <el-col :span="24">
                    <el-form-item label="匹配路径" prop="methodUrl">
                        <el-input v-model="form.methodUrl" placeholder="请输入匹配路径" style="width: 100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="参数名称" prop="paramName">
                        <el-input v-model="form.paramName" placeholder="请输入参数名称" style="width: 100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="参数类型" prop="paramType">
                        <el-select v-model="form.paramType" placeholder="请选择参数类型" style="width: 100%">
                            <el-option
                            v-for="item in paramTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="参数值" prop="paramValue">
                        <el-input v-model="form.paramValue" placeholder="请输入参数值" style="width: 100%"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="QPS阈值" prop="qps">
                        <el-input-number v-model="form.qps" controls-position="right" :min="0" :max="2147483647"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="QPS阈值">
                        <el-date-picker
                            v-model="timeRanges"
                            type="datetimerange"
                            @change="setTime"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            clearable="">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit()">确 定</el-button>
            <el-button @click="close()">关 闭</el-button>
        </div>
    </el-dialog>
</template>

<script>

export default {
    data() {
        return {
            title: '',
            visible: false,
            form: {
                id: null,
                flowId: 1,
                methodUrl: null,
                paramName: null,
                paramType: null,
                paramValue: null,
                qps: 0,
                startTime: null,
                finishTime: null,
                createTime: '',
                createUser: ''
            },
            rule: {
                methodUrl: [{ required: true, message: '请输入匹配路径', trigger: 'blur' }],
                paramName: [{ required: true, message: '请输入参数名称', trigger: 'blur' }],
                paramType: [{ required: true, message: '请选择参数类型', trigger: 'blur' }],
                paramValue: [{ required: true, message: '请输入参数值', trigger: 'blur' }]
            },
            loading: false,
            disabled: false,
            timeRanges: null,
            paramTypeOptions: [
                {
                    value: 'String',
                    label: 'String'
                },
                {
                    value: 'Number',
                    label: 'Number'
                },
                {
                    value: 'Boolean',
                    label: 'Boolean'
                }
            ]
        }
    },
    methods: {
        /**
         * 提交表单
         */
        async submit() {
            if (!this.valid('FORM')) return
            const row = Object.assign(this.form, {});           
            this.$emit('success', JSON.stringify(row))
            this.$message.success('添加成功')
            this.close()
        },

        /**
         * 校验表单
         */
        valid(formRef) {
            let res = false;
            this.$refs[formRef].validate((valid) => {
                if (valid) {
                    res = valid
                }
            })
            return res;
        },

        /**
         * 打开表单
         */
        open() {
            this.visible = true
            this.title = '添加规则'
        },

        /**
         * 关闭表单
         */
        close() {
            this.$refs['FORM'].resetFields()
            this.$refs['FORM'].clearValidate()
            this.visible = false
        },

        /**
         * 时间区间
         */
        setTime(val) {
            this.form.startTime  = val[0]
            this.form.finishTime = val[1]
        },
    }
}
</script>

<style>

</style>